<template>
  <div>
    <a-form :model="form" ref="formRef" :rules="rules">
      <a-form-item label="姓名" name="name">
        <a-input v-model:value="form.name" />
      </a-form-item>
      <a-form-item label="电话" name="phone">
        <a-input v-model:value="form.phone" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import router from "@router/index.js";
import { reactive, ref, toRefs } from "@vue/reactivity";
import { $Storage } from "@utils/storage.js";
import { register } from "@apis/register.js";
import $http from "@utils/request.js";
import { wxLogin } from "@apis/login.js";
import { onMounted } from "@vue/runtime-core";

export default {
  setup() {
    const state = reactive({
      openid: "", //判断小程序项目还是pc项目
      unionid: "", //统一标识符
      form: {//表单数据
        name: "",
        phone: "",
      },
      rules: {//校验规则
        name: [
          {
            required: true,
            message: "请填写用户名称",
            trigger: "change",
          },
        ],
        phone: [
          {
            required: true,
            message: "请填写电话号码",
            trigger: "change",
          },
        ],
      },
    });

    // 生命周期判断
    onMounted(() => {
      const { isRegister } = router.currentRoute.value.query;

      if (isRegister === "1") {
        //已经注册
        const { token } = router.currentRoute.value.query;
        $Storage.setItem("jwttoken", token);
        router.push("/home");
      } else {
        //未注册
        const { openid, unionid } = router.currentRoute.value.query;
        state.openid = openid;
        state.unionid = unionid;
      }
    });

    // 注册接口
    const API_register = () => {
      return $http.request({
        url: register,
        method: "POST",
        data: {
          data: {
            name: state.form.name, //用户名
            phone: state.form.phone, //电话号码
            pcopenid: state.openid, //判断小程序项目还是pc项目
            wxuid: state.unionid, //统一资源标识符
          },
        },
      });
    };

    // 登录接口
    const API_wxLogin = (openid, unionid) => {
      return $http.request({
        url: wxLogin,
        method: "POST",
        data: {
          param: {
            openid,
            unionid,
          },
        },
      });
    };

    // 注册
    const formRef = ref();
    const onSubmit = async () => {
      try {
        await formRef.value.validate(); //校验

        let resReigster = await API_register(); //注册接口

        if (resReigster.data.code === 1000) {
          let resLogin = await API_wxLogin(state.openid, state.unionid); //登录接哦酷
          
          if (resLogin.data.code === 1000) {
            $Storage.setItem("jwttoken", resLogin.data.data.jwttoken); //存token
            router.push("/home"); //跳到首页
          }
        }
      } catch (error) {
        console.log(error);
      }
    };

    return {
      ...toRefs(state),
      formRef,
      onSubmit,
    };
  },
};
</script>

<style>
</style>